<template>
    <div class="home">
        <Title :msg="msg" />
        <ContextBox v-for="(item, index) in list" :key="index" :title="item['title']" :destList="item['destList']">
        </ContextBox>

        <el-tabs v-model="activeName">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
        <el-button type="primary" @click="nextHandler" class="btn">下一页</el-button>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Title from '@/components/Title.vue'
import ContextBox from '@/components/ContextBox.vue'

const router = useRouter()
const msg = ref<string>('欢迎来到Tauri的世界')
const activeName = ref<string>('first')
const list = ref<Array<{
    title: string,
    destList: Array<string>
}>>([{
    title: '是什么',
    destList: [
        '1. Tauri是一款使用Rust作为后端开发桌面应用的框架；',
        '2. 使用Rust工具和Webview中呈现的HTML的组合来构建桌面应用程序;',
        '3. 后端使用Rust和系统进行交互，包装成Tauri插件后会暴露出JS API供前端使用;',
        '4. 通过Webview进行消息传递来控制系统;',
        '5. 兼容所有前端框架，而您无需做出任何改变。',]
}, {
    title: 'Tauri 与 Electron 相比，这里给出Tauri三个优势:',
    destList: [
        '1. 打包更小：Tauri只有2.5MB，而Electron 却有85MB;',
        '2. 启动更快：Electron 启动速度官网数据是4秒，而Tauri只有2秒;',
        '3. 性能更好：得益于基于rust的高性能和安全性。',
    ]
}])

const nextHandler = () => {
    router.push({ path: '/start' })
}
</script>
<style lang='less' scoped>
.home {
    width: 100%;
    height: 100vh;
    background: #fff;
    overflow: hidden;

    .btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
}
</style>